var MarqueeTool; 
function onMarqueeUpdate() 
{ 
	var coords = MarqueeTool.getCoords(); 
	$('sample_x').innerHTML = $('coord_x').value = coords.x1; 
	$('sample_y').innerHTML = $('coord_y').value = coords.y1; 
	$('sample_w').innerHTML = $('coord_w').value = coords.width; 
	$('sample_h').innerHTML = $('coord_h').value = coords.height; 
} 
function onWindowLoad() 
{ 
	//new PreviewToolTip('element_container', {id: 'preview'}); 
	//MarqueeTool = new Marquee('sampleid', { element_container: 'contenedor', preview: 'preview', color: '#333', opacity: 0.75 });
	MarqueeTool = new Marquee('imagen', { element_container: 'element_container', color: '#333', opacity: 0.75, ratio: 1.33, allowHotKeys: false });
	MarqueeTool.setRatio(2/3);
	MarqueeTool.setOnUpdateCallback(onMarqueeUpdate);
	MarqueeTool.selectAll();
	onMarqueeUpdate();
} 
Event.observe(window, 'load', onWindowLoad);

function paso1()
{
	var coords = MarqueeTool.getCoords(); 
	$('coord_x2').value = coords.x1; 
	$('coord_y2').value = coords.y1;
	$('coord_w2').value = coords.width; 
	$('coord_h2').value = coords.height;
	
	MarqueeTool.setRatio(4/3);
	MarqueeTool.selectAll();
	onMarqueeUpdate();
	$('icono').style.visibility = 'visible';
	$('mensaje').innerHTML = "Ahora realice la selecci&oacute;n para la relaci&oacute;n de aspecto 4:3 y presione";
	$('continuar1').onclick = paso2;
}

function paso2()
{
	$('submit').click();
}
